feat(37055) Add search to the workspace #1213

vanch3d · 2025-10-08T11:22:01Z

See https://hivemq.kanbanize.com/ctrl_board/57/cards/37055/details/

The PR adds a floating toolbox on the Workspace and a long-overdue search tool in it.

The search is based on a regex matching on the id of every visible (i.e. with the hidden attribute not set to false) entity (i.e. every node such as adapter, bridge) in the graph.

When the search matches a list of existing entities, they are shown as selected on the graph, as well as having the viewport centred on the selection.

The search string can be cleared, in this case all nodes will be deselected and the viewport centred on all the visible nodes (i.e. fitview)

The toolbar also contains two navigation buttons, prev and next, which allow the users to briefly iterate between each of the individual nodes returned by the matching search pattern. In such navigation, all matching nodes remain selected, but the viewport is now focusing on individual nodes.

Please note that the selection used in the search is the same as any manual selection by the users: clicking on another (non-searched) node or on the canvas itself will clear the selection, while keeping the search restrictions

Before

After

github-actions · 2025-10-08T11:39:20Z

Test Results

460 files 460 suites 4m 17s ⏱️
3 850 tests 3 847 ✅ 3 💤 0 ❌
3 857 runs 3 854 ✅ 3 💤 0 ❌

Results for commit 6269b0c.

♻️ This comment has been updated with latest results.

github-actions · 2025-10-08T11:39:49Z

Coverage Report

Overall Project	65.05%	✅

There is no coverage information present for the Files changed

…e and navigation

Copilot

Pull Request Overview

This PR adds a search functionality to the workspace by introducing a floating toolbar with search capabilities for finding nodes in the graph. Users can search for entities (adapters, bridges, devices) using regex pattern matching on node IDs, navigate through search results, and clear selections.

Key changes:

Added a new search component with regex-based filtering and navigation controls
Introduced a floating toolbar positioned at the top-left of the workspace canvas
Extracted common fitView configuration to promote code reuse across components

Reviewed Changes

Copilot reviewed 9 out of 10 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`react-flow.utils.ts`	Added common fitView configuration constant for consistent animation behavior
`SearchEntities.tsx`	New search component with regex filtering, selection management, and navigation controls
`SearchEntities.spec.cy.tsx`	Cypress tests for the search component functionality
`CanvasToolbar.tsx`	New floating toolbar container for workspace tools
`CanvasToolbar.spec.cy.tsx`	Tests for the toolbar component
`ReactFlowWrapper.tsx`	Integration of the new toolbar into the workspace canvas
`FormControl.ts`	Added horizontal variant for form layout styling
`translation.json`	Added localization strings for search functionality
`SelectionListener.tsx`	Updated to use the new shared fitView configuration

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

hivemq-edge-frontend/src/modules/Workspace/components/filters/SearchEntities.spec.cy.tsx

hivemq-edge-frontend/src/modules/Theme/components/FormControl.ts

hivemq-edge-frontend/src/modules/Workspace/components/filters/SearchEntities.tsx

oli-hivemq

Left a comment, otherwise LGTM

* feat(37055): add the search toolbox * feat(37055): add a toolbar for the canvas * feat(37055): add variant for the form control * refactor(37055): add options for the react-flow fitview * fix(37055): fix bug * fix(37055): fix translations * chore(37055): a bit of cleaning * test(37055): add tests * refactor(37055): remove the internal state and add callback for chang… * test(37055): add tests * chore(37055): trigger ci * fix(37055): fix bug with state/count * fix(37055): fix translations * test(37055): fix tests * fix(37055): a bit of cleaning

* Merge pull request #1213 * feat(37057): add a toolbox for the filters * feat(37057): add filter types * feat(37057): add filter for status * feat(37057): add filter for selection * feat(37057): add filter for entities * feat(37057): add filter for topics * feat(37057): add options for filter * feat(37057): add apply/clear actions for filters * feat(37057): add component for save/load filter configuration * refactor(37057): refactor the filter popover * refactor(37057): add translations * refactor(37057): add filter utilities * fix(37057): fix portal * refactor(37057): update layout * refactor(37057): update storage keys * refactor(37057): change popover into drawer * refactor(37057): fix translations * refactor(37057): refactor the options of the join * fix(37057): fix overlay for confirmation * refactor(37057): refactor the CTAs * refactor(37057): add custom filters and components * refactor(37057): refactor props and ids * refactor(37057): add types * refactor(37057): refactor the drawer * feat(37057): add support for protocol filtering * refactor(37057): fix status * refactor(37057): add activation wrapper for filters * feat(37057): add quick filters * refactor(37057): fix style * refactor(37057): fix translations * refactor(37057): change layout * feat(37057): add routine for multi-criteria filtering * test(37057): add tests * test(37057): add tests * test(37057): add tests * test(37057): add tests * test(37057): add tests * test(37057): add tests * feat(37057): add toolbar * fix(37057): fix types * refactor(37057): refactor filtering options * refactor(37057): add callbacks * test(37057): add tests * test(37057): add tests * fix(37057): fix translations * fix(37057): fix rebase * fix(36682): fix linting * refactor(37057): refactor the quick filter save component * test(37057): add test * fix(37057): fix translations * fix(37057): fix layout * fix(37057): fix types and prop names * fix(37057): fix types * fix(37057): fix layout * refactor(37057): add handles for save and activate * refactor(37057): refactor the callbacks * refactor(37057): refactor the handling of a new quick filter * test(37057): add tests * refactor(37057): update translations * chore(37057): trigger ci pipeline * fix(37057): fix accessibility * fix(37057): fix tranlations * fix(37057): fix test * fix(37057): fix QA review issues * fix(37057): fix tests * test(37057): add tests * fix(37057): a bit of cleaning * fix(37057): fix the type

* feat(37055): add the search toolbox * feat(37055): add a toolbar for the canvas * feat(37055): add variant for the form control * refactor(37055): add options for the react-flow fitview * fix(37055): fix bug * fix(37055): fix translations * chore(37055): a bit of cleaning * test(37055): add tests * refactor(37055): remove the internal state and add callback for chang… * test(37055): add tests * chore(37055): trigger ci * fix(37055): fix bug with state/count * fix(37055): fix translations * test(37055): fix tests * fix(37055): a bit of cleaning

* Merge pull request #1213 * feat(37057): add a toolbox for the filters * feat(37057): add filter types * feat(37057): add filter for status * feat(37057): add filter for selection * feat(37057): add filter for entities * feat(37057): add filter for topics * feat(37057): add options for filter * feat(37057): add apply/clear actions for filters * feat(37057): add component for save/load filter configuration * refactor(37057): refactor the filter popover * refactor(37057): add translations * refactor(37057): add filter utilities * fix(37057): fix portal * refactor(37057): update layout * refactor(37057): update storage keys * refactor(37057): change popover into drawer * refactor(37057): fix translations * refactor(37057): refactor the options of the join * fix(37057): fix overlay for confirmation * refactor(37057): refactor the CTAs * refactor(37057): add custom filters and components * refactor(37057): refactor props and ids * refactor(37057): add types * refactor(37057): refactor the drawer * feat(37057): add support for protocol filtering * refactor(37057): fix status * refactor(37057): add activation wrapper for filters * feat(37057): add quick filters * refactor(37057): fix style * refactor(37057): fix translations * refactor(37057): change layout * feat(37057): add routine for multi-criteria filtering * test(37057): add tests * test(37057): add tests * test(37057): add tests * test(37057): add tests * test(37057): add tests * test(37057): add tests * feat(37057): add toolbar * fix(37057): fix types * refactor(37057): refactor filtering options * refactor(37057): add callbacks * test(37057): add tests * test(37057): add tests * fix(37057): fix translations * fix(37057): fix rebase * fix(36682): fix linting * refactor(37057): refactor the quick filter save component * test(37057): add test * fix(37057): fix translations * fix(37057): fix layout * fix(37057): fix types and prop names * fix(37057): fix types * fix(37057): fix layout * refactor(37057): add handles for save and activate * refactor(37057): refactor the callbacks * refactor(37057): refactor the handling of a new quick filter * test(37057): add tests * refactor(37057): update translations * chore(37057): trigger ci pipeline * fix(37057): fix accessibility * fix(37057): fix tranlations * fix(37057): fix test * fix(37057): fix QA review issues * fix(37057): fix tests * test(37057): add tests * fix(37057): a bit of cleaning * fix(37057): fix the type

* feat(37055): add the search toolbox * feat(37055): add a toolbar for the canvas * feat(37055): add variant for the form control * refactor(37055): add options for the react-flow fitview * fix(37055): fix bug * fix(37055): fix translations * chore(37055): a bit of cleaning * test(37055): add tests * refactor(37055): remove the internal state and add callback for chang… * test(37055): add tests * chore(37055): trigger ci * fix(37055): fix bug with state/count * fix(37055): fix translations * test(37055): fix tests * fix(37055): a bit of cleaning

* Merge pull request #1213 * feat(37057): add a toolbox for the filters * feat(37057): add filter types * feat(37057): add filter for status * feat(37057): add filter for selection * feat(37057): add filter for entities * feat(37057): add filter for topics * feat(37057): add options for filter * feat(37057): add apply/clear actions for filters * feat(37057): add component for save/load filter configuration * refactor(37057): refactor the filter popover * refactor(37057): add translations * refactor(37057): add filter utilities * fix(37057): fix portal * refactor(37057): update layout * refactor(37057): update storage keys * refactor(37057): change popover into drawer * refactor(37057): fix translations * refactor(37057): refactor the options of the join * fix(37057): fix overlay for confirmation * refactor(37057): refactor the CTAs * refactor(37057): add custom filters and components * refactor(37057): refactor props and ids * refactor(37057): add types * refactor(37057): refactor the drawer * feat(37057): add support for protocol filtering * refactor(37057): fix status * refactor(37057): add activation wrapper for filters * feat(37057): add quick filters * refactor(37057): fix style * refactor(37057): fix translations * refactor(37057): change layout * feat(37057): add routine for multi-criteria filtering * test(37057): add tests * test(37057): add tests * test(37057): add tests * test(37057): add tests * test(37057): add tests * test(37057): add tests * feat(37057): add toolbar * fix(37057): fix types * refactor(37057): refactor filtering options * refactor(37057): add callbacks * test(37057): add tests * test(37057): add tests * fix(37057): fix translations * fix(37057): fix rebase * fix(36682): fix linting * refactor(37057): refactor the quick filter save component * test(37057): add test * fix(37057): fix translations * fix(37057): fix layout * fix(37057): fix types and prop names * fix(37057): fix types * fix(37057): fix layout * refactor(37057): add handles for save and activate * refactor(37057): refactor the callbacks * refactor(37057): refactor the handling of a new quick filter * test(37057): add tests * refactor(37057): update translations * chore(37057): trigger ci pipeline * fix(37057): fix accessibility * fix(37057): fix tranlations * fix(37057): fix test * fix(37057): fix QA review issues * fix(37057): fix tests * test(37057): add tests * fix(37057): a bit of cleaning * fix(37057): fix the type

vanch3d self-assigned this Oct 8, 2025

cla-bot bot added the cla-signed label Oct 8, 2025

vanch3d force-pushed the epic/37055-workspace-operations branch from f001984 to 5dfe683 Compare October 13, 2025 09:10

vanch3d added 13 commits October 13, 2025 10:10

feat(37055): add the search toolbox

10400ee

feat(37055): add a toolbar for the canvas

1244c9d

feat(37055): add variant for the form control

14bd899

refactor(37055): add options for the react-flow fitview

d7356c9

fix(37055): fix bug

2ecb3cb

fix(37055): fix translations

5963fee

chore(37055): a bit of cleaning

b094f4d

test(37055): add tests

969000e

refactor(37055): remove the internal state and add callback for chang…

77845f5

…e and navigation

test(37055): add tests

d988d90

chore(37055): trigger ci

cf4201a

fix(37055): fix bug with state/count

6e0a4b0

fix(37055): fix translations

eae047c

vanch3d force-pushed the feat/37055-workspace-search branch from 283ced6 to eae047c Compare October 13, 2025 09:10

vanch3d marked this pull request as ready for review October 13, 2025 09:31

vanch3d requested a review from Copilot October 13, 2025 09:31

Copilot AI reviewed Oct 13, 2025

View reviewed changes

vanch3d added 2 commits October 13, 2025 11:22

test(37055): fix tests

258a193

fix(37055): a bit of cleaning

6269b0c

oli-hivemq reviewed Oct 13, 2025

View reviewed changes

hivemq-edge-frontend/src/modules/Workspace/components/filters/SearchEntities.tsx Show resolved Hide resolved

oli-hivemq approved these changes Oct 13, 2025

View reviewed changes

vanch3d merged commit 6cee54d into epic/37055-workspace-operations Oct 13, 2025
18 of 20 checks passed

vanch3d deleted the feat/37055-workspace-search branch October 13, 2025 16:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(37055) Add search to the workspace #1213

feat(37055) Add search to the workspace #1213

Uh oh!

vanch3d commented Oct 8, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 8, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 8, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

oli-hivemq left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

feat(37055) Add search to the workspace #1213

feat(37055) Add search to the workspace #1213

Uh oh!

Conversation

vanch3d commented Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before

After

Uh oh!

github-actions bot commented Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test Results

Uh oh!

github-actions bot commented Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

oli-hivemq left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vanch3d commented Oct 8, 2025 •

edited

Loading

github-actions bot commented Oct 8, 2025 •

edited

Loading

github-actions bot commented Oct 8, 2025 •

edited

Loading